import React, { useState } from "react";
import { RuleTree } from "@alipay/techui-rule-tree";
import { Button, Form, Input } from "antd";

export default function App() {
  const [form] = Form.useForm();
  const [value, setValue] = useState({});
  return (
    <div>
      <Button
        onClick={() => {
          console.log(form.getFieldsValue());
        }}
      >
        submit
      </Button>
      <Form
        form={form}
        initialValues={{
          rule: {
            relation: "and",
            children: [
              {
                name: "Jack",
              },
            ],
          },
        }}
        onValuesChange={(_, values) => setValue(values)}
      >
        <Form.Item name={"rule"}>
          <RuleTree>
            {(field) => {
              return (
                <Form.Item noStyle name={[field.name, "name"]}>
                  <Input />
                </Form.Item>
              );
            }}
          </RuleTree>
        </Form.Item>
      </Form>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
